<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<style type="text/css">
		*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{font:12px 'Helvetica Neue','PingFang SC',STHeitiSC-Light,Helvetica,microsoft yahei,Arial;-webkit-text-size-adjust:100%}body{max-width:640px;margin:0 auto}li,ul{list-style:none}a{text-decoration:none;background:0 0;color:#666}a:active,a:hover{outline:0}.city{font-size:15px}.city .back{background:#009bdf;height:40px;color:#fff;text-align:center;line-height:40px;font-size:18px;overflow:hidden;position:relative}.city .back .left{position:absolute;width:30px;left:4%;display:none}.city .back .left a{margin-top:11px;display:inline-block;border-top:2px solid #fff;border-left:2px solid #fff;width:16px;height:16px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.city li{padding:10px 5%;color:#666;border-bottom:1px solid #ddecfa}.city li img{width:15px}
	</style>
</head>
<body>
	<div class="city">
		<div class="back">
			<div class="left"><a href="javascript:;"></a></div>请选择城市
		</div>
		<ul class="list" id="province">
			
		</ul>		
		<ul class="list" id="city" style="display: none;">
			
		</ul>
		<ul class="list" id="area" style="display: none;">
			
		</ul>
	</div>
	<script type="text/javascript">
		var token = 12121;
		$.ajax({
		    url:"json/getOpenCity.json",
			type:"post",
			dataType:'json',
		    success: function(json){
		    	// var json=eval("("+json+")");
		    	var	d=json.data;
		    		txt="";
		        	provinceCode="";
		        // 遍历出省
		        for(var i=0;i<d.length;i++){
		        	if(provinceCode=="" || provinceCode!=d[i].provinceCode && d[i].provinceCode){
		        		provinceCode = d[i].provinceCode;
		        		txt=txt+'<li flex="cross:center main:justify" provinceCode="'+provinceCode+'"><font>'+d[i].provinceName+'</font><img src="images/select.png"></li>';
		        	}
		        }
		        $('#province').append(txt);
		        // 获取省对应的城市
		        $('#province li').on('click',function(){
		        	$('#city').empty();
					var txt2="";
					for(var i=0;i<d.length;i++){
						if($(this).attr('provinceCode')==d[i].provinceCode){
							txt2=txt2+'<li flex="cross:center main:justify" cityCode="'+d[i].cityCode+'"><font>'+d[i].cityName+'</font><img src="images/select.png"></li>';
						}
					}
					$('#province').hide();
					$('#city').show();
					$('#city').append(txt2);
					$('.back .left').show();
					// 点击城市触发事件
					$('#city li').on('click',function(){
						$('#area').empty();
						var txt3="";
						cityCode='';
						for(var i=d.length-1;i>=0;i--){
							if($(this).attr('cityCode')==d[i].cityCode){
								if(d[i].areaCode){
									cityCode=d[i].cityCode;
									txt3=txt3+'<li flex="cross:center main:justify" areaCode="'+d[i].areaCode+'"><font>'+d[i].areaName+'</font><img src="images/select.png"></li>';
								}else if(d[i].cityCode==cityCode){
									
								}else{
									console.log('无：'+d[i].cityCode);
									location.href="#?cityCode="+$(this).attr('cityCode')+"&token="+token;
									return;
								}
							}
						}
						$('#city').hide();
						$('#area').show();
						$('#area').append(txt3);
						$('.back .left').show();
						$('#area li').on('click',function(){
							location.href="#?areaCode="+$(this).attr('areaCode')+"&token="+token;
						});
					});
				});
		    },
		    error:function(xhr){
		    	console.log("失败："+xhr);
		    }
		});
		// 返回事件
		$('.back .left a').on('click',function(){
			if($('#city').css('display')!='none'){
				$('#province').show();
				$('#city').hide();
				$(this).parent().hide();
			}
			if($('#area').css('display')!='none'){
				$('#city').show();
				$('#area').hide();
			}
		});
	</script>
</body>
</html>